<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no" >
    <title>文件列表</title>
    <style>
        html,body {
            margin: 0;
            padding: 0;
        }

        .file {
            display: block;
            text-decoration: none;
            clear: both;
            padding: 10px;
            overflow: hidden;
            border-bottom: 1px solid #dedede;
        }

        .file-icon {
            float: left;
        }

        .file-icon img {
            width: 36px;
            height: 36px;
        }

        .file-info {
            padding-left: 50px;
        }

        .file-info .file-name {
            color: #333;
            font-size: 15px;
            line-height: 20px;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
        }

        .file-info .file-meta {
            line-height: 16px;
            font-size: 12px;
            color: #999999;
        }

        .no-files {
            text-align: center;
            padding: 100px 0;
        }

        .no-files img {
            width: 100px;
        }

        .no-files h2 {
            font-size: 15px;
            color: #999999;
            font-weight: normal;
        }
    </style>
</head>
<body>
<% if(files.length === 0) { %>
<div class="no-files">
    <img src="" alt="暂无文件">
    <h2>暂无文件</h2>
</div>
<% } else { %>
    <% files.forEach(function(file) { %>
    <div class="files">
        <% if(file.isDirectory) { %>
        <a href="?dir=<%= file.path %>" class="file">
            <div class="file-icon">
                <img src="" alt="文件夹">
            </div>
            <div class="file-info">
                <div class="file-name"><%= file.name %></div>
                <div class="file-meta">
                    <span>目录</span>
                </div>
            </div>
        </a>
        <% } else { %>
        <a href="<%= file.path %>" class="file">
            <div class="file-icon">
                <% if(file.isVideo) { %>
                <img src="" alt="视频文件">
                <% } else if(file.isImage) { %>
                <img src="<%= file.path %>" alt="图片预览" style="object-fit: cover; background: #ffffff">
                <% } else if(file.isZip) { %>
                <img src="" alt="压缩包">
                <% } else { %>
                <img src="" alt="文件">
                <% } %>
            </div>
            <div class="file-info">
                <div class="file-name"><%= file.name %></div>
                <div class="file-meta">
                    <span><%= file.sizeFormat %></span>
                </div>
            </div>
        </a>
        <% } %>
    </div>
    <% }); %>
<% } %>
</body>
</html>